<template>
  <div class="cover-short-video">
    <div class="cover-preview">
      <div :class="['cover-preview-content', getCoverClass]" ref="contentRef">
        <div class="phone-content">
          <div :class="['phone-item', getColumnClass]" v-for="item in list" :key="item">
            <img v-if="item.phoneImgUrl" class="phone-img" :src="item.phoneImgUrl" />
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <el-button @click="modalStore.closeModal()">取消</el-button>
      <el-button type="primary" @click="handleDown" :loading="loading">下载图片</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, computed } from 'vue';
import { ElMessage } from 'element-plus';
import html2canvas from 'html2canvas';

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },

  imageType: {
    type: [Number, String],
    default: '',
  },

  coverSize: {
    type: [Number, String],
    default: '',
  },

  columnNum: {
    type: [Number, String],
    default: '',
  },

  groupList: {
    type: Array,
    default: () => [],
  },
});

const loading = ref(false);

const getCoverClass = computed(() => {
  const map = {
    1: 'is-ratio-1',
    2: 'is-ratio-2',
    3: 'is-ratio-3',
  };
  return map[props.coverSize];
});

const getColumnClass = computed(() => {
  const map = {
    2: 'is-column-2',
    3: 'is-column-3',
    4: 'is-column-4',
    5: 'is-column-5',
  };
  return map[props.columnNum];
});

const contentRef = ref();

const handleDown = async () => {
  await nextTick(); // 确保 DOM 更新完成

  const element = contentRef.value;
  if (!element) {
    console.error('元素未找到');
    return;
  }

  const sizeMap = {
    1: { w: 1440, h: 2560 },
    2: { w: 1500, h: 2000 },
    3: { w: 2000, h: 3000 },
  };

  const scale = sizeMap[props.coverSize].w / element.offsetWidth;

  console.log(element.offsetWidth, element.offsetHeight, scale, Math.ceil(scale), 'element');

  try {
    loading.value = true;
    const canvas = await html2canvas(element, {
      useCORS: true, // 启用跨域支持
      allowTaint: true, // 允许污染画布
      scale: Math.ceil(scale),
      // width: sizeMap[props.coverSize].w,
      // height: sizeMap[props.coverSize].h,
      // windowWidth: sizeMap[props.coverSize].w,
      // windowHeight: sizeMap[props.coverSize].h,
    });

    const item = props.groupList.find((v) => v.value == props.imageType);

    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = `短视频封面_${item.label}_${Date.now()}.png`;
    link.click();
    loading.value = false;
    ElMessage.success('下载成功');
  } catch (error) {
    console.error('截图失败:', error);
    loading.value = false;
    ElMessage.error('截图失败');
  }
};
</script>

<style lang="scss" scoped>
.cover-short-video {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .cover-preview {
    height: 100%;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;
    box-sizing: border-box;
  }

  .cover-preview-content {
    height: 100%;
    width: auto;
    aspect-ratio: 9/16;
    background-color: #f8f8f8;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;

    &.is-ratio-1 {
      aspect-ratio: 9/16;
    }

    &.is-ratio-2 {
      aspect-ratio: 3/4;
    }

    &.is-ratio-3 {
      aspect-ratio: 2/3;
    }
  }

  .phone-content {
    height: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
  }

  .phone-item {
    width: calc(100% / 3);
    // width: 100px;
    height: auto;
    aspect-ratio: 9/16;
    // padding: 2px;
    box-sizing: border-box;

    &.is-column-2 {
      width: calc(100% / 2);
    }

    &.is-column-3 {
      width: calc(100% / 3);
    }

    &.is-column-4 {
      width: calc(100% / 4);
    }
    &.is-column-5 {
      width: calc(100% / 5);
    }
  }

  .phone-img {
    width: 100%;
    height: 100%;
  }

  .footer {
    text-align: center;
    margin-top: 12px;
  }
}
</style>
